<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>demo1</title>
</head>

<body>
    <script src="./three.min.js"></script>
    <script src="./OrbitControls.js"></script>
    <script src="./dist/MYDXFViewer.js"></script>
    <script>

        // 这个位置是留给后面初始化和开发3d页面的js代码
        let scene = new THREE.Scene();
        let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 2000);
        camera.position.set(0, 50, 300);
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // 给场景添加一个环境光
        let ambientLight = new THREE.AmbientLight(0xf5f5f5);
        scene.add(ambientLight);
        let grid = new THREE.GridHelper(400, 30, 0xcccccc, 0xcccccc);
        scene.add(grid);
        let ball = new THREE.SphereGeometry(5, 32, 32);//5:球半径 第一个32：水平分割面的数量. 第二个32：垂直分割面的数量.
        let ballColor = new THREE.MeshPhongMaterial({ color: 0xff0000 });
        let cube = new THREE.Mesh(ball, ballColor);
        scene.add(cube);
        let controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableZoom = true;//允许缩放
        //设置相机移动距离
        controls.minDistance = 1;
        controls.maxDistance = 2000;
        controls.enableRotate = true;
        let DXFViewer = MYDXFViewer.default;
        const viewer = new DXFViewer();
        async function get1() {
            let dxf = await viewer.getFromPath('./6.dxf', './helvetiker_regular.typeface.json');
            console.log(dxf);
            scene.add(dxf)
            centerCamera()

        }

        const loader = new THREE.FontLoader();
        loader.load('/helvetiker_regular.typeface.json', function (font) {
            const geometry = new THREE.TextGeometry('Hello World', {
                font: font,
                size: 5,
                height: 0.1
            });
            geometry.center(); // 居中几何体
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            const text = new THREE.Mesh(geometry, material);
            scene.add(text);
        });



        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
        let isEditing = false; // 是否正在编辑文本的标志
        let editingText = null; // 当前正在编辑的文本对象
        let inputElement = null; // HTML输入元素

        function onMouseClick(event) {
            if (isEditing) return; // 如果已经在编辑，则不处理点击事件
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObjects(scene.children);
            if (intersects.length > 0 && intersects[0].object instanceof THREE.Mesh) {
                editingText = intersects[0].object; // 设置当前编辑的文本对象
                isEditing = true; // 开始编辑状态
                createInputElement(); // 创建并显示输入框
            }
        }
        window.addEventListener('click', onMouseClick, false);

        function createInputElement() {
    inputElement = document.createElement('input');
    inputElement.style.position = 'absolute';
    inputElement.style.left = `${mouse.x * window.innerWidth / 2 + window.innerWidth / 2}px`; // 根据鼠标位置定位输入框
    inputElement.style.top = `${mouse.y * window.innerHeight / 2 + window.innerHeight / 2}px`; // 根据鼠标位置定位输入框
    inputElement.style.zIndex = 1000; // 确保输入框在上方显示
    document.body.appendChild(inputElement);
    inputElement.addEventListener('blur', onInputBlur); // 当输入框失去焦点时更新文本并移除输入框
    inputElement.addEventListener('keydown', function(event) { if (event.key === 'Enter') inputElement.blur(); }); // 按Enter键也可以失去焦点，触发更新文本操作
    inputElement.focus(); // 让输入框获得焦点，显示键盘并允许用户输入文本
}
function onInputBlur() {
    if (!isEditing) return; // 如果不在编辑状态，则不处理事件
    if (editingText && inputElement){

    }
}



        // get1()
        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }
        function centerCamera() {
            let box = new Box3().setFromObject(scene);

            let bigAxis = box.max.x - box.min.x > box.max.y - box.min.y ? 'x' : 'y';
            let size = bigAxis === 'x' ? box.max.x - box.min.x : box.max.y - box.min.y;
            let sizeFrustum = bigAxis === 'x' ? camera.right - camera.left : camera.top - camera.bottom;

            let lateralMargin = 0.9; //percentage of screento leave on the sides. 1 means no margin
            if (size < sizeFrustum) {
                camera.zoom = lateralMargin * (sizeFrustum / size);
                camera.updateProjectionMatrix();
            }
            else
                camera.zoom = 1;

            let center = box.min.add(box.max.sub(box.min).divideScalar(2));

            camera.position.set(center.x, center.y, center.z + 100);
            controls.target.set(camera.position.x, camera.position.y, center.z);

            camera.updateProjectionMatrix();
        }
        render();
    </script>
</body>

</html>